<template>
	<view class="order-list">
		<!-- 订单信息 -->
		<block v-for="order in orders" :key="order.orderCode">
			<view class="order-item">
				<view>
					<view>
						<text style="font-size: 30rpx; color: #333; font-weight: bold">{{ order.type }}</text>
					</view>
					<view>
						<text class="hosp-rank">{{ order.hospitalName || '' }}({{ order.address || '' }})</text>
						<text class="hosp-label">{{ order.orderPrice }}元</text>
					</view>
				</view>
				<view class="order-actions">
					<button @click="handleTakeOrder(order.orderCode)" class="action-button">接取</button>
					<button @click="showDetails(order)" class="action-button">查看详情</button>
				</view>
			</view>
		</block>
		<view v-if="orders.length === 0" class="no-orders">
			暂无待接单
		</view>
	</view>

	<!-- 订单详情模态框 -->
	<view class="modal" v-if="selectedOrder">
		<view class="modal-content">
			<view class="modal-header">
				<text class="modal-title">订单详情</text>
				<button class="close-button" type="link" @click="hideDetails">&times;</button>
			</view>
			<view class="modal-body">
				<view class="order-info" >
					<text>订单编号:&nbsp; &nbsp; {{ selectedOrder.orderCode }}</text>
					<text>创建时间: &nbsp; &nbsp;{{ selectedOrder.createTime }}</text>
					<text>类型:&nbsp; &nbsp; {{ selectedOrder.type }}</text>
					<text>价格:&nbsp; &nbsp; {{ selectedOrder.orderPrice }}元</text>
					<text>开始时间: &nbsp; &nbsp;{{ selectedOrder.orderStartTime }}</text>
					<text>结束时间: &nbsp; &nbsp;{{ selectedOrder.orderEndTime || '无' }}</text>
					<text>状态: &nbsp; &nbsp;{{ getOrderStatus(selectedOrder.orderStatus) }}</text>
				</view>
				<view class="patient-info">
					<text>患者姓名: &nbsp; &nbsp;{{ selectedOrder.patientInfo.patientName }}</text>
					<text>患者年龄: &nbsp; &nbsp;{{ selectedOrder.patientInfo.age }}</text>
					<text>患者性别: &nbsp; &nbsp;{{ getGender(selectedOrder.patientInfo.sex) }}</text>
					<text>患者电话: &nbsp; &nbsp;{{ selectedOrder.patientInfo.patientPhone }}</text>
					<text>患者地址: &nbsp; &nbsp;{{ selectedOrder.patientInfo.address }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		myrequest
	} from '@/common/js/utils';

	const orders = ref([]);
	const selectedOrder = ref(null);

	const token = uni.getStorageSync('token');

	onLoad(() => {
		fetchOrders();
	});

	const fetchOrders = () => {
		myrequest({
			myurl: '/order/list',
			data: {
				isAdmin: false,
				isEscort: true,
				status: 1 // 待接单
			},
			header: {
				'Authorization': token,
				'Source-Platform': 'mini-program'
			},
			mysuccess: (res) => {
				console.log("orderList", res.data);
				orders.value = res.data;
			},
			myfail: (err) => {
				console.error('Failed to fetch orders:', err);
				return uni.showToast({
					title: '获取订单失败！',
					icon: 'error'
				});
			}
		});
	};

	// 处理接取订单逻辑
	const handleTakeOrder = (orderCode) => {
		console.log('Taking order with code:', orderCode);
		myrequest({
			myurl: '/order/take',
			data: {
				orderCode: orderCode
			},
			header: {
				'Authorization': token,
				'Source-Platform': 'mini-program'
			},
			mysuccess: (res) => {
				console.log('Take order success:', res);
				uni.showToast({
					title: '接取成功',
					icon: 'success'
				});
				uni.switchTab({
					url: '../myorder/index'
				});
			},
			myfail: (err) => {
				console.error('Failed to take order:', err);
				return uni.showToast({
					title: '接取失败！',
					icon: 'error'
				});
			}
		});
	};

	// 显示订单详情
	const showDetails = (order) => {
		selectedOrder.value = order;
	};

	// 隐藏订单详情
	const hideDetails = () => {
		selectedOrder.value = null;
	};

	// 获取订单状态文本
	const getOrderStatus = (status) => {
		switch (status) {
			case 1:
				return '待接单';
			case 2:
				return '已支付';
			case 3:
				return '待陪诊';
			default:
				return '未知状态';
		}
	};

	// 获取性别文本
	const getGender = (sex) => {
		return sex === 0 ? '男' : '女';
	};
</script>

<style scoped>
	.order-list {
		padding: 20rpx;
	}

	.order-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 20rpx;
		border-bottom: 1px solid #ccc;
	}

	.order-details {
		margin-bottom: 10rpx;
	}

	.detail-label {
		font-weight: bold;
		margin-top: 5rpx;
	}

	.order-actions {
		display: flex;
		gap: 10rpx;
	}

	.no-orders {
		text-align: center;
		color: #888;
		margin-top: 50rpx;
	}

	.action-button {
		background-color: #1aad79;
		color: white;
		border: none;
		padding: 10rpx 20rpx;
		border-radius: 5rpx;
		cursor: pointer;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.hosp-rank {
		font-size: 26rpx;
		font-weight: bold;
		color: #0bb585;
		margin-right: 15rpx;
		display: block;
	}

	.hosp-label {
		font-size: 26rpx;
		font-weight: bold;
		color: #0ca7ae;
		margin-right: 15rpx;
	}

	.modal-content {
		background: white;
		padding: 30rpx;
		border-radius: 10rpx;
		width: 80%;
		max-width: 600rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.close-button {
		font-size: 32rpx;
		margin-right: 2rpx;
	}

	.modal-body {
		line-height: 1.6;
	}

	.order-info text,
	.patient-info text {
		display: block;
		margin-bottom: 20rpx;
	}
</style>